<div class="help">
    <button class="go-back-button" on:click={() => window.location.href = '/'}>Go back to the home page</button>
    <div>
        <ol>
            <li>Click on "User Settings" in the bottom left corner.</li>
            <li>Click on "Privacy & Safety".</li>
            <li>Scroll down to the "Request Data" section at the bottom of the page.</li>
            <li>Click on "Request Data".</li>
            <li>Wait for the email from Discord with the download link. 🥳</li>
        </ol>
    </div>

    <div>
        Here is a short TikTok video ✨ to show you how to request your Discord Data Package! Note that this is also possible on mobile device using the iOS and Android Discord apps!
    </div>
    <div class="tiktok-player">
        <!-- svelte-ignore a11y-media-has-caption -->
        <video controls width="250">

            <source src="https://github.com/Androz2091/discord-data-package-explorer/raw/master/assets/help-tiktok.mp4"
                    type="video/webm">
        
            Sorry, your browser doesn't support embedded videos.
        </video>
    </div>
</div>

<style>
    .go-back-button {
        background-color: #ffffff;
        color: black;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
    }
    .help {
        margin-right: 0.5rem;
        margin-left: 0.5rem;
        padding-top: 7rem;
		max-width: 768px;
	}
    .tiktok-player {
        margin-top: 2rem;
        text-align: center;
    }
    @media (min-width: 1080px) {
        .help {
            margin: auto;
        }
    }
</style>
